<head>
    <title></title>
    <link rel="stylesheet" href="./animate.css">
</head>
<body>
    <div id="app">
        <button @click="show=!show">显示/隐藏</button>
        <transition
        @enter="enter"
        @leave="leave"
        v-bind:css="false"
        >
            <p v-if="show">过度文字效果</p>
        </transition>
    </div>
    <script src="./vue.js"></script>
    <script src="./velocity.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                show:true,
                enter (el, done) {			// duration动画执行时间
                    Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                    Velocity(el, { fontSize: '1em' }, { complete: done })
                },
                leave (el, done) {
                    Velocity(el, { translateX: '15px', rotateZ: '50deg' },{duration: 3000})
                    Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                    Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0}, { complete: done } )
                }
            }
        })
    </script>
</body>